<!---
 @Name: index.vue
 @Author: lhf
 @Owner:
 @Date: 2025-07-15 15:20:27
 @LastEditTime: 2025-07-15 15:20:27
 @LastEditors:lhf
 @Description:  医院信息
 @Version:
 @FilePath: src\views\column\index.vue
--->

<template>
  <div class="container">
    <div class="list-container flex-body" v-show="!show">
      <div class="aside">
        <ul>
          <li
            class="txt-ellipsis"
            v-for="(item, index) in programInfos"
            :key="index"
            :class="{ hover: tabIndex === index }"
            @click.stop="getDoctorLists(index)"
          >
            {{ item.name || '' }}
          </li>
        </ul>
      </div>
      <div class="list-wrapper flex-1">
        <div class="doc-media" v-for="(item, index) in docLists" :key="index">
          <div class="doc-wrapper" @click="toggleInfo(item)">
            <div class="doc-body flex-body">
              <div class="doc-avator flex-center">
                <img :src="item.workingPicture || ''" alt="" @error="avatarError" />
              </div>
              <div class="doc-info">
                <h3 class="txt-ellipsis">{{ item.doctorName || '' }}</h3>
                <div class="doc-title">
                  <span class="txt-ellipsis">{{ item.doctorTitleName || '' }}</span>
                </div>
                <div class="doc-dept txt-ellipsis">{{ item.deptName || '' }}</div>
              </div>
            </div>
            <div class="doc-desc">
              {{ item.intro }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <bese-column mode="docInfo" />
  </div>
</template>

<script>
import { getProgramInfo, getDoctorList } from '@/api';
export default {
  name: 'HelloWorld',
  props: {
    programId: String
  },
  components: {},
  computed: {
    show() {
      return this.$store.getters.show;
    },
    docList() {
      return this.$store.getters.docs;
    }
  },
  data() {
    return {
      tabIndex: 0,
      programInfos: [],
      docLists: []
    };
  },
  mounted() {
    if (this.programId?.trim()) {
      this.getProgramInfos();
    }
  },
  methods: {
    toggleInfo(row) {
      this.$store.commit(
        'SET_INFO',
        JSON.stringify({
          content: row
        })
      );
      this.$store.commit('SET_SHOW', true);
    },
    getProgramInfos() {
      getProgramInfo({
        programId: this.programId
      }).then((res) => {
        if (res.status == 0) {
          this.programInfos = res.data || [];
          this.getDoctorLists(0);
        }
      });
    },
    getDoctorLists(idx) {
      this.tabIndex = idx;
      const doctorIds = this.programInfos[idx]?.content || '';
      if (doctorIds === '') return (this.docLists = []);
      const id = this.programInfos[idx]?.id || '';
      if (this.docList[id]) {
        return (this.docLists = this.docList[id]);
      }
      getDoctorList({
        doctorIds: doctorIds
      }).then((res) => {
        this.$store.commit('SET_DOCS', { ...this.docList, ...{ [id]: res } });
        this.docLists = res || [];
      });
    },
    avatarError(e) {
      e.target.src = require('@/assets/images/avator.png');
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.container {
  height: 100%;
  font-size: 28px;
  .list-container {
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
  }
  .aside {
    width: 296px;
    height: 100%;
    background: #ffffff;
    border-radius: 20px;
    border-right: 2px solid #dddddd;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
    scroll-behavior: smooth; /* 平滑滚动 */
    li {
      height: 120px;
      line-height: 120px;
      background: #fff;
      font-weight: 600;
      font-size: 42px;
      color: #333;
      text-align: center;
      padding: 0 10px 0 20px;
      border-left: 10px solid transparent;
      &.hover {
        background: #ccdef0;
        color: #0059b3;
        border-left: 10px solid #0059b3;
      }
    }
  }
  .list-wrapper {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
    scroll-behavior: smooth; /* 平滑滚动 */
    margin: 0 -10px;
    padding-left: 20px;
    .doc-media {
      width: 33.33%;
      padding: 10px;
      float: left;
      .doc-wrapper {
        padding: 20px;
        display: block;
        background: #fff;
        border: 2px solid #ddd;
        border-radius: 15px;
        overflow: hidden;
        .doc-avator {
          width: 200px;
          height: 271px;
          overflow: hidden;
          img {
            display: block;
            object-fit: contain;
            width: 200px;
          }
        }
        .doc-info {
          flex: 1;
          padding-left: 20px;
          overflow: hidden;
          h3 {
            height: 84px;
            font-weight: 500;
            font-size: 52px;
            color: #333;
            line-height: 84px;
          }
          .doc-title {
            height: 50px;
            line-height: 50px;
            font-weight: 500;
            font-size: 30px;
            color: #fff;
            span {
              background: #0059b3;
              border-radius: 10px;
              display: inline-block;
              vertical-align: top;
              padding: 0 10px;
              max-width: 100%;
            }
          }
          .doc-dept {
            height: 60px;
            font-weight: 500;
            font-size: 42px;
            color: #0059b3;
            line-height: 60px;
          }
        }
        .doc-desc {
          margin-top: 24px;
          height: 130px;
          font-weight: 400;
          font-size: 28px;
          color: #999;
          text-align: justify;
          overflow: hidden;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          white-space: normal;
        }
      }
    }
  }
}
</style>
